<template>
	<view class="wrap">
		<!-- 登录 -->
		<view class="login-black" v-if="showLoginDialog">
			<view class="login-white" >
				<view v-if="loginStep" class="box">
					<view class="f-r-c title">请先授权登录</view>
					<view class="checkbox f-r-c" >
					    <checkbox-group @change="isCheckedChange"  :disabled="agreeXy">
					        <label style="font-size: 26rpx;color: #666;"  class="f-r-s">
					            <checkbox :checked="agreeXy" :color="themeColor" :disabled="agreeXy" ></checkbox>
					            我已阅读并同意
					            <span  @click="open_protocol()" :style="{'color':themeColor,}">&nbsp;《注册协议》《隐私保护政策》</span>
					        </label>
					        
					    </checkbox-group>
					   
					</view>
					<view class="foot">
						<view class="f-r-c btn "  :style="{'color':themeColor,'background':themeColor+'20'}" @click="cancelLogin">取消</view>
						<view class="f-r-c btn"  :style="{'color':'#fff','background':themeColor}" @click="onLogin" >确认</view>
					</view>
				</view>
				
				<view v-if="phoneStep" class="box">
					<view class="f-r-c title">手机号快捷登录</view>
					<view class="f-r-c checkbox">
						<text >
							为了更好的为您服务，在官方网站或者 APP 登录使用时，同步用户信息，需要您授权手机号
						</text>
					</view>
					<view class="foot">
						<view class="f-r-c btn "  :style="{'color':themeColor,'background':themeColor+'20'}" @click="cancelPhone">取消</view>
						<button class="f-r-c btn" :style="{'color':'#fff','background':themeColor}" hover-class="none" type='primary' open-type="getPhoneNumber" @getphonenumber="submitPhone" >确认</button>
					</view>
				</view>
				
			</view>
		</view>
		
		<view v-if="!showSearch">
			<!-- 公共头部 -->
			<MessageScroll :themeColor="themeColor"></MessageScroll>
			<!-- 搜索栏 -->
			<view  class="search-close f-r-b">
				<view class="s-title">
					<text class="title-h1">{{typeName}}</text>
					<text class="title-date">{{$getToday()}}</text>
				</view>
				<view class="s-btn f-r-s" @click="showSearch=true">
					<uni-icons type="search" size="19" color="#ccc"></uni-icons>
					<text class="line">｜</text>
					<text class="text" >搜索</text>
				</view>
			</view>
		</view>
		
		<view v-if="showSearch" class="search-open">
			<view class="s-input f-r-s">
				<uni-icons type="search" size="19" color="#ccc"></uni-icons>
		        <input class="input" v-model="productName" placeholder="请输入产品名称" @confirm="SearchList" @input="SearchList"/>
				<text class="submit" :style="{'background':themeColor}" @click="SearchList">搜索</text>
			</view>
			<text class="cacel" @click="cacelSearch">取消</text>
			
		</view>
		<!-- 收缩列表 -->
		<view class="list-box">
			<view class="list-bar f-r-b f-r-nw">
				<picker :range="brandtype"  :value="brand_index" @change="brandChange" range-key="subclassName">
				   <div class="f-r-s bar1 ">
					   {{brand_index>-1?brandtype[brand_index]['subclassName']:'品牌'}}
					   <image src="@/static/image/select.png"  style="width: 26rpx;height: 26rpx;margin: 0 10rpx;" ></image>
				   </div>
				</picker>
				<view class="f-r-c bar2" >参考价格</view>
				<view class="f-r-c bar3" >涨跌幅</view>
				<view class="f-r-c bar4" ></view>
				<view class="f-r-s bar5" >我的关注</view>
			</view>
			<view class="list-table">
				<view class="list-li f-r-b f-r-nw" v-for="(item,index) in list" :key="index" @click="todetail(item)">
					<view class="f-r-s bar1 ellipsis" style="display: block;">{{item.productName}}</view>
					<view class="f-r-c bar2">¥{{item.productPrice||0}}</view>
					<view class="f-r-c bar3" :style="{'color':item.biliType==1?'red':item.biliType==2?'green':themeColor}">
					    {{item.biliPrice}}
						<view style="margin: 0 10rpx;">
							<uni-icons v-if="item.biliType==1" type="arrow-up" size="15" color="red"></uni-icons>
							<uni-icons v-else-if="item.biliType==2" type="arrow-down" size="15" color="green"></uni-icons>
							<text v-else > - </text>
						</view>
					</view>
					<view class="f-r-c bar4" >
						
						<view class="btn f-r-c " v-if="item.focusId==1":style="{'background':themeColor,'opacity':1,}" @click.stop="guanzhu(item)">
							<uni-icons type="plusempty" size="12" color="#fff"></uni-icons>
							<text>关注</text>
						</view>
						<view class="btn f-r-c " v-else :style="{'background':themeColor,'opacity':0.5 ,}"  @click.stop="guanzhu(item)">已关注</view>
						
						
						
					</view>
					<view class="f-r-s bar5"  >
						历史行情
						<uni-icons type="right" size="16" color="#666"></uni-icons>
					</view>
					
				</view>
			</view>
			<div v-if="searchLoading" class="ul-li-loading">
				加载中...
			</div>
			<div v-if="!searchLoading&&list.length==0&&msg==''" class="ul-li-loading" >
				没有数据
			</div>
			<div v-if="!searchLoading&&list.length==0&&msg!=''" class="ul-li-loading">{{msg}}</div>
		</view>
		
		
	</view>
</template>

<script>
	
import MessageScroll from "@/component/MessageTitle.vue";
export default{
	components:{
		MessageScroll,
	},
	computed: {
	  themeColor() {
	    return this.$themeColor;
	  }
	},
	data(){
		return{
			base_url:'', 
			typeId:'',
			typeName:'',
			//过滤
			showSearch:false,
			
			brandtype:[],
			brand_index:-1,
			brandId:'',
			productName:'',
			pageNum:1,
			pageSize:12,
			list:[],
			searchLoading:false,
			
			isLogin:false,//是否登录
			userinfo:{
				avatar:'',
				nickName:'',
				userId:null,
				userName:'',
				userDesc:'',
				phoneNumber:'',
				memberId:null,//会员id
				memberExpireDate:'',//会员到期时间
				referralCode:'',//会员推广码
				disable:0,//会员状态（0普通, 1会员, 2过期）
				isVip:false,//是否VIP 
			},
			showLoginDialog:false,
			//同意协议
			agreeXy:false,
			loginStep:true, //显示登录按钮
			phoneStep:false, //显示授权手机号按钮
			code:'',
			loadingIcon:false,//避免重复点击
			useriv:'',
			userencryptedData:'',
			referralCode:'',//推给我得用户得推广码
			msg:'',
			
			
		}
	},
	onLoad(option) {
		this.typeId=option.id?Number(option.id):null;
		this.typeName=option.name?option.name:null;
		uni.setNavigationBarTitle({
		  title: this.typeName 
		});
		this.getTypeList();
		let referralCode = uni.getStorageSync("referralCode");
		console.log("推给我得用户得推广码",referralCode);
		this.referralCode=referralCode&&referralCode!=undefined?referralCode:'';
	},
	onShow() {
		this.getUserInfo();
		uni.pageScrollTo({
			scrollTop:0,
			duration:0,
		})
		this.pageNum=1;
		this.getList();
		
		
	},
	onReachBottom() {
		if(!this.isLogin){
			this.open();
			return false;
		}
		this.pageNum++;
		this.getList();
		console.log('触底翻页',this.pageNum);
		
	},
	methods:{
		isCheckedChange(e){
			console.log(e.detail.value);
		     this.agreeXy=true;
		},
		//查看用户协议
		open_protocol: function() {
			this.agreeXy=true;
			uni.navigateTo({
				url: '/pages/main/UserAgreement',
			});
		},
		getTypeList(){
			let opts={
			    url:'/market/getSubclassByCategoryId/'+this.typeId,
			    method: 'get'
			};
			this.$http(opts,{}).then(res=>{
				this.brandtype=res.data;  //categoryId id subclassName 
			})
		},
			
		brandChange(e){
			if(!this.isLogin){
				this.open();
				return false;
			}
			this.brand_index=e.detail.value;
			if(e.detail.value>-1){
				this.brandId=this.brandtype[this.brand_index]['id'];
				this.pageNum=1;
				this.getList();
			}
			
		},
		SearchList(){
			if(!this.isLogin){
				this.open();
				return false;
			}
		
			this.pageNum=1;
			this.getList();
		},
		cacelSearch(){
			this.pageNum=1;
			this.productName='';
			this.showSearch=false;
			this.getList();
		},
		getList(){
			if(!this.isLogin&&this.pageNum!=1){
				this.open();
				return false;
			}
			this.searchLoading=true;
			let opts={
			    url:'/market/getProductList/'+this.typeId,
			    method: 'get'
			};
			let params={
				productName:this.productName,
				subclassId:this.brandId,
				pageNum:this.pageNum,
				pageSize:this.pageSize,
			}
			this.$http(opts,params).then(res=>{
				this.searchLoading=false;
				console.log(res.total);
				if(res.code==200){
					if(this.isLogin && !this.userinfo.isVip){
						this.list=[];
						this.msg="非会员没有权限,请先开通会员!";
						console.log("不是会员");
					}else{
						console.log("是会员");
						let data=res.rows;
						if(this.pageNum==1){
							this.list=[];
						}
						this.list = this.list.concat(data);
					
					}
					
					
				}
			})
			
			
		},
		todetail(item){
			if(!this.isLogin){
				this.open();
				return false;
			}
			
			uni.navigateTo({
				url:'/pages/todayDetail/detail?detail='+JSON.stringify(item),
			})
			
		},
		guanzhu(item){
			if(!this.isLogin){
				this.open();
				return false;
			}
			let opts={
			    url:`/authMarket/addOrRemoveFacus/${item.id}`,
			    method: 'get'
			};
			this.$http(opts,{}).then(res=>{
				console.log("关注",res.data);
				if(res.code==200){
					if(item.focusId){
						item.focusId=0;
					}else{
						item.focusId=1;
					}
				}
			})
		},
		
		getUserInfo(){
		    let opts = {
		    	url: '/wx/getUserInfo',
		    	method: 'get'
		    };
		    let _self=this;
		    _self.$http(opts,{}).then(res => {
		    	if(res.code==200){
					console.log("用户信息",res.data);
		            _self.userinfo=res.data;
		            uni.setStorageSync('userinfo',res.data);
					_self.isLogin=true;
		    	}else{
					_self.isLogin=false;
				}
		    }) 
		},
		
		
		getCode(){
		    wx.login({
		        success:(res) => {
		            this.code = res.code;
		        }
		    })
		},
		onLogin() {
			if(!this.agreeXy){
				uni.showToast({
					title:'需要阅读并同意注册协议和隐私保护政策',
					icon:'none',
				})
				return false;
			}
			
			this.getCode();
			if(this.loadingIcon){
				return false;
			}
			this.loadingIcon=true;  //请求中
			let that=this;
			uni.getUserProfile({
				desc: "weixin",
				success: (res1) => {
			        if(res1.errMsg=='getUserProfile:ok'){
						that.useriv=res1.iv;
						that.userencryptedData=res1.encryptedData;
			             let opts = {
			                url: '/wx/login',//先判断是否是新用户 
			                method: 'POST'
			             };
			             let param = {
			               encryptedData:'',  //用户加密信息 或昵称头像
			               iv:'',
			               code:that.code,	
			               signature:res1.iv,
			               rawData:res1.encryptedData,
			               superReferralCode:this.referralCode,
			             };
			             that.$http(opts, param).then(res3 => {
			                 if(res3.code=='200'){
								
								let token=res3.token;
								if(token&&token!=''){
									uni.setStorageSync('token',res3.token);
									that.showLoginDialog=false;
									this.loadingIcon=false;
									uni.showToast({
										title:'登录成功',
										icon:'none',
									})
									that.getUserInfo();
									that.getList();
									that.getTypeList();
									
								}else{
									that.loginStep=false;
									that.phoneStep=true;
									this.loadingIcon=false;
								}
								
								
								
			                
			                 }else{
			                    uni.showToast({
			                        title:res3.msg,
			                        icon:'none'
			                    })
			                 }
			             })
			                     
			        }
			        
				},
				fail: (err) => {
					console.log(err)
				}
			})
			
			
		
		},
		
		
		
		
		
		//打开登录弹框
		open(){
			this.showLoginDialog=true;
		},
		//取消登录
		cancelLogin(){
			this.showLoginDialog=false;
		},
		
		//取消授权手机号
		cancelPhone(){
			this.loginStep=true;
			this.phoneStep=false;
		    this.showLoginDialog=false;
		},
		//授权授权 获取手机号 code 用于登录
		submitPhone(e) {
			if (e.detail.errMsg == "getPhoneNumber:ok") {
			    let res1=e.detail;
				let that=this;
			    uni.login({
			         provider: 'weixin',
			         success: (res2) => {
			             let opts = {
			                url: '/wx/login',
			                method: 'POST'
			             };
			             let param = {
			                 encryptedData:res1.encryptedData,
			                 iv:res1.iv,
			                 code:res2.code,	
			                 signature:that.useriv,
			                 rawData:that.userencryptedData,
			                 superReferralCode:this.referralCode,
			             };
						 
			             that.$http(opts, param).then(res3 => {
			                 
			                 if(res3.code=='200'){
			                   uni.setStorageSync('token',res3.token);
			                   that.showLoginDialog=false;
							   that.loadingIcon=false;
			                   uni.showToast({
			                   	title:'登录成功',
			                   	icon:'none',
			                   })
							   that.getUserInfo();
							   that.getList();
							   that.getTypeList();
			                    
			                 }else{
			                    uni.showToast({
			                        title:res3.msg,
			                        icon:'none'
			                    })
			                 }
			             })
			             
			         },
			    });
			    
			} else {
			    uni.showToast({
			        title:'手机号授权失败',
			        icon:'none',
			    })
			}
		    
		},
		
		
		
		
	},
	
}
</script>
<style>
</style>
<style scoped lang="less">
	button{
	        border:0;
	        -webkit-tap-highlight-color: transparent;
	        background-color:transparent;
	//         // border-radius:50%;
	        box-sizing: border-box;
	//         color: #000;
	        cursor: pointer;
	//         display: block;
	       border-radius: 20rpx;
	       font-size: 33rpx;
	       font-weight: 500;
	       text-align: center;
	        line-height:0;
	        margin-left: 0;
	        margin-right: 0;
	        overflow: hidden;
	        padding-left: 0;
	        padding-right: 0;
	        position: relative;
	        text-decoration: none;
	}
	button::after{
	     border:0;
	}
	.wrap{
		.login-black{
			width: 100vw;
			height: 100vh;
			background: rgba(0,0,0,0.4);
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: 200;
			.login-white{
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background: #fff;
				border-radius: 20rpx 20rpx 0 0;
				.box{
					overflow: hidden;
					.title{
						text-align: center;
						font-size: 40rpx;
						color: #000;
						font-weight: 500;
						margin-bottom: 20rpx;
						margin-top: 60rpx;
					}
					.checkbox{
						margin: 0 60rpx 60rpx ;
						height: 70rpx;
						text{
							font-size: 26rpx;
							color: #bbb;
							text-align: center;
						}
						
						
					}
					.foot{
						margin-bottom: 20rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-around;
						.btn{
							width: 240rpx;
							height: 80rpx;
							border-radius: 20rpx;
							font-size: 33rpx;
							font-weight: 500;
							text-align: center;
							
						}
					}
							
				}
				
			}
		}
		
		// padding: 24rpx 0;
		.search-close{
			padding: 0 32rpx;
			height: 110rpx;
			.s-title{
				.title-h1{
					font-weight: 500;
					font-size: 40rpx;
					margin-right: 10rpx;
					
				}
				.title-date{
					color: #888;
					font-size: 28rpx;
				}
			}
			.s-btn{
				width: 180rpx;
				padding: 0 20rpx;
				background: #eee;
				border-radius: 30rpx;
				height: 56rpx;
				.line{
					color: #00000010;
				}
				.text{
					color:#999;
					font-weight: 300;
					
				}
			}
			
			
		}
	    
		.search-open{
			padding: 0 32rpx;
			height: 120rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.s-input{
				flex: 1;
				height: 74rpx;
				background: #f8f8f8;
				border-radius: 50rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				.input{
					flex:1;
					margin: 0 10rpx;
					font-size: 28rpx;
				}
				.submit{
					width: 130rpx;
					height: 60rpx;
					border-radius: 50rpx;
					background: #ccc;
					color: #fff;
					text-align: center;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
				}
			}
			.cacel{
				margin-left: 32rpx;
				text-align: center;
				height: 40rpx;
				color: #666;
				font-size: 28rpx;
			}
		}
		.list-box{
			
			
			.list-bar{
				background: #f8f8f8;
				height: 100rpx;
				padding: 0 20rpx;
				font-size: 26rpx;
				font-weight: bold;
				
				
			}
			.list-table{
				font-size: 26rpx;
				.list-li{
					height: 110rpx;
					padding: 0 20rpx;
					border-bottom:1rpx #f0f0f0 solid ;
				}
			}
			.ul-li-loading{
				text-align: center;
				color: #666;
				font-size: 26rpx;
				margin: 30rpx auto;
			}
			.bar1{
				width: 170rpx;
				padding-left: 10rpx;
				text-align: left;
				height: 40rpx;
				line-height: 40rpx;
				
			}
			.bar2{
				width: 120rpx;
				text-align: center;
				overflow: hidden;
			}
			.bar3{
				width: 100rpx;
				text-align: center;
			}
			.bar4{
				width: 110rpx;
				text-align: center;
				.btn{
					width: 100%;
					border-radius: 20rpx;
					color: #fff;
				}
			}
			.bar5{
				width: 150rpx;
				text-align: center;
			}
			
		}
	
	}
</style>